<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TL-CMS 内容管理系统在线安装-安装程序</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='lib/layui/layui.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/tl_cms.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/public_js.js') }}"></script>
    <style>
        .layui-form-item .layui-input-inline {
            width: 43% !important;
        }

        .layui-form-item .layui-input-inline input {
            width: 100% !important;
        }

        body {
            background: url("{{ url_for('static',filename='images/install.png') }}") no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        .layui-elem-quote {
            border-left: 5px solid #BFBFBF;
        }

        .layui-input {
            background: #ccc;
        }

        .layui-form-pane .layui-form-label {
            background: #BFBFBF;
        }

        .layui-table {
            background: #BFBFBF;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>TL-CMS 内容管理系统在线安装</legend>
    </fieldset>

    <div class="layui-row">
        <div class="layui-col-xs2">&nbsp;</div>
        <div class="layui-col-xs8">
            <div>
                <form class="layui-form layui-form-pane">
                    <!--系统信息-->
                    <div>
                        <blockquote class="layui-elem-quote">服务器信息</blockquote>
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>参数</th>
                                <th>值</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>服务器域名/IP地址</td>
                                <td>{{ system.server_ip }}</td>
                            </tr>
                            <tr>
                                <td>服务器操作系统</td>
                                <td>{{ system.os_version }}</td>
                            </tr>
                            <tr>
                                <td>Python版本</td>
                                <td>{{ system.python_version }}</td>
                            </tr>
                            <tr>
                                <td>系统安装目录</td>
                                <td>{{ system.system_path }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--环境检测-->
                    <div>
                        <blockquote class="layui-elem-quote">环境权限检测</blockquote>
                        系统要求必须满足下列所有的目录的权限全部可读写的需求才能使用
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>检测项</th>
                                <th>读取权限</th>
                                <th>写入权限</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>系统目录</td>
                                <td>
                                    {% if system.system_access.r %}
                                        <i class="layui-icon layui-icon-ok-circle x-green"></i>
                                    {% else %}
                                        <i class="layui-icon layui-icon-close-fill x-red"></i>
                                    {% endif %}
                                    读
                                </td>
                                <td>
                                    {% if system.system_access.w %}
                                        <i class="layui-icon layui-icon-ok-circle x-green"></i>
                                    {% else %}
                                        <i class="layui-icon layui-icon-close-fill x-red"></i>
                                    {% endif %}
                                    写
                            </tr>
                            <tr>
                                <td>上传目录</td>
                                <td>
                                    {% if system.upload_access.r %}
                                        <i class="layui-icon layui-icon-ok-circle x-green"></i>
                                    {% else %}
                                        <i class="layui-icon layui-icon-close-fill x-red"></i>
                                    {% endif %}
                                    读
                                </td>
                                <td>
                                    {% if system.upload_access.w %}
                                        <i class="layui-icon layui-icon-ok-circle x-green"></i>
                                    {% else %}
                                        <i class="layui-icon layui-icon-close-fill x-red"></i>
                                    {% endif %}
                                    写
                                </td>
                            </tr>
                            <tr>
                                <td>安装目录</td>
                                <td>
                                    {% if system.install_access.r %}
                                        <i class="layui-icon layui-icon-ok-circle x-green"></i>
                                    {% else %}
                                        <i class="layui-icon layui-icon-close-fill x-red"></i>
                                    {% endif %}
                                    读
                                </td>
                                <td>
                                    {% if system.install_access.w %}
                                        <i class="layui-icon layui-icon-ok-circle x-green"></i>
                                    {% else %}
                                        <i class="layui-icon layui-icon-close-fill x-red"></i>
                                    {% endif %}
                                    写
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--mysql-->
                    <div>
                        <blockquote class="layui-elem-quote">
                            MySQL数据库配置
                        </blockquote>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库主机</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mysql_db_host" required placeholder="请填写数据库主机"
                                       autocomplete="off" class="layui-input" value="localhost">
                            </div>
                            <div class="layui-form-mid layui-word-aux">一般为localhost（本机）</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="mysql_db_name" required placeholder="请填写数据库名称"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库端口</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mysql_db_port" required placeholder="请填写数据库端口"
                                       autocomplete="off" class="layui-input" value="3306"
                                       oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                            </div>
                            <div class="layui-form-mid layui-word-aux">一般为3306</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库用户</label>
                            <div class="layui-input-block">
                                <input type="text" name="mysql_db_username" required placeholder="请填写数据库用户"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="mysql_db_password" placeholder="请填写数据库密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux x-green">
                                <strong class="layui-btn layui-btn-primary layui-btn-xs" onclick="db_connect(this,1)">测试连接</strong>
                                <span class="x-green" style="display: none">信息正确</span>
                                <span class="x-red" style="display: none">信息有误</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库编码</label>
                            <div class="layui-input-block">
                                <input type="radio" name="mysql_db_coding" value="UTF8" title="UTF8" checked>
                            </div>
                        </div>
                    </div>
                    <!--redis-->
                    <div>
                        <blockquote class="layui-elem-quote">Redis数据库配置</blockquote>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库主机</label>
                            <div class="layui-input-inline">
                                <input type="text" name="redis_db_host" required placeholder="请填写数据库主机"
                                       autocomplete="off" class="layui-input" value="localhost">
                            </div>
                            <div class="layui-form-mid layui-word-aux">一般为localhost（本机）</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库端口</label>
                            <div class="layui-input-inline">
                                <input type="text" name="redis_db_port" required placeholder="请填写数据库端口"
                                       autocomplete="off" class="layui-input" value="6379"
                                       oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                            </div>
                            <div class="layui-form-mid layui-word-aux">一般为 6379</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="redis_db_password" placeholder="请填写数据库密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">
                                <strong class="layui-btn layui-btn-primary layui-btn-xs" onclick="db_connect(this,2)">测试连接</strong>
                                <span class="x-green" style="display: none">信息正确</span>
                                <span class="x-red" style="display: none">信息有误</span>
                            </div>
                        </div>
                    </div>
                    <!--初始化管理员-->
                    <div>
                        <blockquote class="layui-elem-quote">管理员初始密码</blockquote>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required placeholder="请填写用户名" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" required placeholder="请填写密码" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">初始化密码 至少3位</div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a class="layui-btn">立即提交</a>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <input type="hidden" name="web_domain">
                </form>
            </div>
        </div>
        <div class="layui-col-xs2"></div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    $(function () {
        $('input[name="web_domain"]').val(document.location.origin);
        $('.layui-input-block').find('a[class="layui-btn"]').on('click', function () {
            layer.load();
            var data = $("form").serializeArray();
            $.ajax({
                type: 'POST',
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.status === 0) {
                        layer.closeAll('loading');
                        layer.msg('安装成功', {icon: 1, time: 2000});
                        $.cookie('/db_connect/1', null);
                        $.cookie('/db_connect/2', null);
                        setTimeout(function () {
                            window.location.replace(data.redirect);
                        }, 2000);
                    } else {
                        layer.closeAll('loading');
                        layer.msg('安装失败: ' + data.msg, {icon: 2, time: 3000});
                    }
                }, error: function (data) {
                    layer.closeAll('loading');
                    layer.msg('安装异常!', {icon: 7, time: 2000});
                }
            });

        })
    });

    function db_connect(obj, classify) {
        var div = $(obj).parent('div').parent('div').parent('div');
        var inputs = div.find('input');
        data = {};
        inputs.each(function () {
            var val = $(this).val();
            var name = $(this).attr('name');
            data[name] = val
        });
        $(obj).parent('div').find('span').hide();
        $.ajax({
            url: "/db_connect/" + classify,
            type: 'GET',
            data: data,
            dataType: "json",
            success: function (data) {
                if (data.status === 0) {
                    $(obj).parent('div').find('span[class="x-green"]').show();
                    layer.msg('连接成功!', {icon: 1, time: 1000});
                    $.cookie('status_' + classify, true)
                } else {
                    $(obj).parent('div').find('span[class="x-red"]').show();
                    layer.msg('连接失败:' + data.msg, {icon: 2, time: 2000});
                    $.cookie('status_' + classify, false)
                }
            },
            error: function (data) {
                layer.msg('连接异常!', {icon: 7, time: 2000});
                $(obj).parent('div').find('span[class="x-red"]').show();
                $.cookie('status_' + classify, false)
            }
        });
    }
</script>
</body>
</html>